<template lang="">
    <div>
        <el-button type="primary" style="float:right;margin-bottom: 8px;margin-right: 2px" @click="up()">返回
        </el-button>
        <el-button type="primary" style="float:right;margin-bottom: 8px;margin-right: 2px" @click="addWorker()">添加
        </el-button>
        <el-table stripe v-loading="loading" ref="multipleTable" :data="tableData[0]" tooltip-effect="dark"
            style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="高管编号" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-button
                        @click="Look(scope.row.id,scope.row.name,scope.row.birth,scope.row.job,scope.row.sex,scope.row.education)">
                        {{ scope.row.id }}</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="高管名称" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="job" label="职务" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="sex" label="性别" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="education" label="学历" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="birth" label="出生日期" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="register_date" label="登陆日期" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="updata_date" label="更新日期" show-overflow-tooltip>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="delect(scope.row.id)" type="text" size="small">删除</el-button>
                    <el-button type="text" size="small"
                        @click="updateWorker(scope.row.id,scope.row.name,scope.row.birth,scope.row.job,scope.row.sex,scope.row.education)">
                        修改
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total,prev, pager, next,jumper" :total='pageCount' :page-size='1'
            :current-page='currentPage' @current-change="handleCurrentChange(currentPage)">
        </el-pagination>
        <div style="margin-top: 20px">
            <el-button @click="delectSelect()">删除选中的目标</el-button>
            <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">删除选中的目标</el-button> -->
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>

    </div>

</template>

<script>
    export default {
        data() {
            return {
                //用来储存后端传过来的全部高管信息对象
                tableData: [],
                loading: false,
                enterpriseId: '',
                //用来储存所选择的数据信息
                multipleSelection: [],
                pageCount: 0,//总页数
                currentPage: 1
            }
        },
        mounted() {
            //在页面加载完成的时候执行此函
            this.getInformation()
        },
        methods: {
            information() {
            },
            //跳转到企业高管信息详情页面并将高管信息通过url传递过去
            Look(id, name, job, sex, birth, education) {
                this.$router.push({ path: '/workesLook', query: { id: id, name: name, job: job, sex: sex, birth: birth, education: education, enterpriseId: this.$route.query.enterpriseId } })
            },
            //执行删除单条企业高管信息的功能
            delect(id) {
                console.log(id)
                //消息确认框 ，防止人员误触按钮导致错误操作
                this.$confirm('此操作将永久删除文件，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //当用户点击确定时发送请求
                    this.$axios.post(`/api/deleteWorkesById`, this.$qs.stringify({
                        workesId: id
                    })).then(res => {
                        //对返回的数据进行判断
                        if (res == "success") {
                            this.$message({
                                message: '请求成功',
                                type: 'success'
                            })
                            this.$axios.post(`/api/WorkesSelectController/queryAllWorkerControl`, this.$qs.stringify({
                                enterpriseId: this.enterprise,
                                index: this.currentPage
                            })).then(res => {
                                console.log(res.data)
                                this.tableData.push(res.data)
                                console.log(this.tableData)
                                this.loading = false
                            })

                        }
                    })
                })
            },
            //添加页面的跳转
            addWorker() {
                this.$router.push({ path: '/workesAdd', query: { enterpriseId: this.$route.query.enterpriseId } });
            },
            //更新页面的跳转
            updateWorker(id, name, birth, job, sex, education) {
                this.$router.push({ path: '/workesUpdata', query: { id: id, name: name, birth: birth, job: job, sex: sex, education: education, enterpriseId: this.$route.query.enterpriseId } })
            },
            //批量删除的功能
            delectSelect() {
                //判断用户是否选择数据
                if (this.multipleSelection.length == 0) {
                    this.$message.error("请选择信息");
                    return
                }
                //消息确认框
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //判断是否选择了至少两条的数据和是否为空
                    if (this.multipleSelection != "" && this.multipleSelection.length > 1) {
                        var arr = new Array();
                        //遍历所选的数据的id
                        for (var i = 0; i < this.multipleSelection.length; i++) {
                            arr[i] = this.multipleSelection[i].id
                        }

                    }
                    console.log(arr)
                    //将储存所选id信息的数组发送给后端
                    if (arr != null && arr != "") {
                        this.$axios.post(`/api/deleteBatchWorkers`, this.$qs.stringify({
                            workesId: arr
                        })).then(res => {
                            //判断后端是否操作成功
                            if (res == success) {
                                this.$message({
                                    message: '请求成功',
                                    type: 'success'
                                })
                            }
                        })
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            getInformation() {
                this.enterprise = this.$route.query.enterpriseId
                console.log(this.$route.query.enterprise)
                this.loading = true
                //在页面加载完成的时候发送请求获取该企业的所有高管信息
                this.$axios.post(`/api/WorkesSelectController/queryAllWorkerControl`, this.$qs.stringify({
                    enterpriseId: this.$route.query.enterpriseId,
                    index: 1

                })).then(res => {
                    console.log(res.data)
                    this.tableData.push(res.data)
                    console.log(this.tableData)
                    this.loading = false
                })
                this.$axios.post(`/api/WorkesSelectController/queryCount`).then(res => {
                    console.log("count" + res.data)
                    this.pageCount = res.data
                })
            },
            //返回到企业信息页面
            up() {
                this.$router.push({ path: '/about' })

            },
            //取消所选择的复选框
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            //获取所选择的复选框的数据信息
            handleSelectionChange(val) {
                console.log(val)
                this.multipleSelection = val;
            },
            handleCurrentChange(currentPage) {//重新读取不同页的数据
                this.$axios.post(`/api/WorkesSelectController/queryAllWorkerControl`, this.$qs.stringify({
                    enterpriseId: this.enterprise,
                    index: this.currentPage
                })).then(res => {
                    console.log(currentPage)
                    console.log(res.data)
                    this.tableData.push(res.data)
                    console.log(this.tableData)
                    this.loading = false
                })
            }
        },
    }
</script>
<style lang="css">

</style>